<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
    <style>
        table
        {
            border-collapse:collapse;
        }
        table, td, th
        {
            border:1px solid black;
        }
        #bd{
            display: none;
        }
        #tadd_div_all{
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
        }
        #tadd_top{
            width: 100%;
            height: 60px;
            border-bottom: solid 2px #afacac;
        }
        #tadd_top p{
            color: #2f4050;
            font-size: 30px;
            padding-top: 10px;
            margin-left: 30px;
        }
        #tadd_center{
            width: 500px;
            height: 100%;
            margin-top: 30px;
            float: left;
        }
        #tadd_center table{
            table-layout: fixed;
            border-collapse:collapse;
            width: 1400px;
            text-align: center;
            margin: 30px auto auto auto;
        }
        #tadd_right_top{
            width: 800px;
            height: 300px;
            float: left;
            margin: 30px 50px;
            background-color: #FFFFFF;
            overflow: auto;
        }
        #tadd_right_bottom{
            width: 800px;
            height: 200px;
            float: left;
            margin: 30px 50px;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<script>
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
</script>
<div id="tadd_div_all">
    <div id="tadd_top"><p>样板添加</p></div>
    <div id="tadd_center">
        <form class="layui-form" th:action="@{/templetAdd}" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">样板编号</label>
                <div class="layui-input-block">
                    <input type="text" name="templet_name" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">客户</label>
                <div class="layui-input-block">
                    <select name="client_id" lay-filter="aihao">
                        <option value=""></option>
                        <option th:each="ctList:${clientList}" th:value="${ctList.client_id}" th:text="${ctList.client_name}"/>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-block">
                    <select name="brand_id" lay-filter="aihao">
                        <option value=""></option>
                        <option th:each="bdList:${brandList}" th:value="${bdList.brand_id}" th:text="${bdList.brand_name}"/>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">规格</label>
                <div class="layui-input-block">
                    <select name="specification_id" lay-filter="aihao">
                        <option value=""></option>
                        <option th:each="snList:${specificationList}" th:value="${snList.specification_id}" th:text="${snList.specification_name}"/>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">型号</label>
                <div class="layui-input-block">
                    <select name="type_id" lay-filter="aihao">
                        <option value=""></option>
                        <option th:each="snList:${specificationList}" th:value="${snList.specification_id}" th:text="${snList.specification_name}"/>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">接单日期</label>
                <div class="layui-input-block">
                    <input type="date" name="date_of_order" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">确定日期</label>
                <div class="layui-input-block">
                    <input type="date" name="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接单人</label>
                <div class="layui-input-block">
                    <input type="text" name="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="text" name="templet_status" class="layui-input" value="待确认">
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="templet_remarks"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <div id="tadd_right_top">
        <button type="button" class="layui-btn" onclick="a()">添加原料</button>
        <table id="table_in" class="layui-table">
            <tr>
                <th id="iframGet">ID</th>
                <th>原料名称</th>
                <th>供应商</th>
                <th>原料单价</th>
                <th>数量</th>
            </tr>
        </table>
    </div>
    <div id="tadd_right_bottom">
        <div class="layui-form-item">
            <label class="layui-form-label">原料合计</label>
            <div class="layui-input-block">
                <input type="text" name="unit_price" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单件工费</label>
            <div class="layui-input-block">
                <input type="text" name="one_price" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">浮动百分比</label>
            <div class="layui-input-block">
                <input type="text" name="budget_float" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">总金额</label>
            <div class="layui-input-block">
                <input type="text" name="sum" class="layui-input">
            </div>
        </div>
    </div>
</div>
<input type="button" value="添加原料" id="aaa" onclick="submitUserList_3()" class="layui-btn">
<input type="button" value="添加预算" id="bbb" onclick="addBudget()" class="layui-btn">
<input type="button" value="测试按钮" id="tet" class="layui-btn">
</body>
<script>
    function a(){
        layer.open({
            type: 2,
            title: 'layer mobile页',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '90%'],
            content: '/IngredientPGhelp'
        });
    }
    $("#tet").click(function () {
    });
    //页面加载时生成样板编号
    $(function() {
        //（YB + 年月日 + 四位随机数）
        var myDate = new Date;
        var year = myDate.getFullYear(); //获取当前年
        var mon = myDate.getMonth() + 1; //获取当前月
        var date = myDate.getDate(); //获取当前日
        if (date<10){
            date = "0"+date;
        }
        var x = 9999;
        var y = 1000;
        var rand = parseInt(Math.random()*(x-y+1)+y);
        $("input[name='templet_name']").val("YB"+year+""+mon+""+date+""+rand);
        $("input[name='date_of_order']").val(year+"-"+mon+"-"+date);
    });
    //添加预算
    $("#bbb").click(function () {
        var sum = 0;
        $("input[name='price']").each(function () {
            sum += parseFloat($(this).val());
        })
        $("input[name='unit_price']").val(sum);
        var unit_price = parseFloat($("input[name='unit_price']").val());
        var one_price = parseFloat($("input[name='one_price']").val());
        var budget_float = parseFloat($("input[name='budget_float']").val());
        var a = unit_price+one_price;
        var b = 1+budget_float;
        var c = a*b;
        $("input[name='sum']").val(Math.round(c*2)/2);
        $("#budgetBtn").click();
    })
    //添加原料清单
    function submitUserList_3() {
        //定义原料集合
        var templet_ingredientList = new Array();
        //定义原料集合中的数量集合
        var num=new Array();
        $("input[name='ingredient_num']").each(function () {
            if ($(this).val()!=''){
                num.push($(this).val());
            }
        });
        var i = 0;
        //获取表格第一列的原料id
        $("#table_in tr").find("td:eq(0)").each(function () {
            templet_ingredientList.push({ingredient_id:$(this).text(),ingredient_num:num[i]});
            i++;
        })
        $.ajax({
            type:"post",
            url:"/templetAddIngredient",
            dataType: 'json',
            contentType:"application/json",
            data:JSON.stringify(templet_ingredientList),
            success:function(){

            }
        })
    }
    //添加预算对象
    function addBudget() {
        var unit_price = parseFloat($("input[name='unit_price']").val());
        var one_price = parseFloat($("input[name='one_price']").val());
        var budget_float = parseFloat($("input[name='budget_float']").val());
        var a = unit_price+one_price;
        var b = 1+budget_float;
        var c = a*b;
        var sum = Math.round(c*2)/2;
        $("input[name='sum']").val(sum);

        var budget = {unit_price:unit_price,one_price:one_price,budget_float:budget_float,sum:sum}
        $.ajax({
            type:"post",
            url:"/templetAddBudget",
            dataType: 'json',
            contentType:"application/json",
            data:JSON.stringify(budget),
            success:function(){
            }
        })
    }

</script>
</html>
